const gitUrl* = "https://github.com/mratsim/arraymancer"

const docItemSeeSrc* = """&nbsp;&nbsp;<a
href="${url}/tree/${commit}/${path}#L${line}"
class="link-seesrc" target="_blank">Source</a>
<a href="${url}/edit/master/${path}#L${line}" class="link-seesrc" target="_blank" >Edit</a>
"""

# TODO: industrialize similar to Nim website: https://github.com/nim-lang/Nim/blob/e758b9408e8fe935117f7f793164f1c9b74cec06/tools/nimweb.nim#L45
# And: https://github.com/nim-lang/Nim/blob/d3f966922ef4ddd05c137f82e5b2329b3d5dc485/web/website.ini#L31

# TODO: move the technical reference to the end (need some CSS so that elements are properly placed)

const docFileTmpl* = """<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--  This file is generated by Nim. -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Favicon -->
<link rel="shortcut icon" href=""/>
<link rel="icon" type="image/png" sizes="32x32" href="">

<!-- Google fonts -->
<link href='https://fonts.googleapis.com/css?family=Lato:400,600,900' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600' rel='stylesheet' type='text/css'/>

<!-- CSS -->
<title>$title</title>
<link rel="stylesheet" type="text/css" href="$nimdoccss">

<script type="text/javascript" src="dochack.js"></script>

<script type="text/javascript">
function main() {
  var pragmaDots = document.getElementsByClassName("pragmadots");
  for (var i = 0; i < pragmaDots.length; i++) {
    pragmaDots[i].onclick = function(event) {
      // Hide tease
      event.target.parentNode.style.display = "none";
      // Show actual
      event.target.parentNode.nextElementSibling.style.display = "inline";
    }
  }

  const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
  function switchTheme(e) {
      if (e.target.checked) {
          document.documentElement.setAttribute('data-theme', 'dark');
          localStorage.setItem('theme', 'dark');
      } else {
          document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
      }
  }

  toggleSwitch.addEventListener('change', switchTheme, false);


  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.setAttribute('data-theme', "dark");
    toggleSwitch.checked = true;
  } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
    document.documentElement.setAttribute('data-theme', "light");
    toggleSwitch.checked = false;
  } else {
    const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
    if (currentTheme) {
      document.documentElement.setAttribute('data-theme', currentTheme);

      if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
      }
    }
  }
}
</script>

</head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arraymancer - $title</title>

<link href="docutils.css" rel="stylesheet" type="text/css"/>
<link href="nav.css" rel="stylesheet" type="text/css"/>

<link href='http://fonts.googleapis.com/css?family=Raleway:400,600,900' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600' rel='stylesheet' type='text/css'/>

<a href="https://github.com/mratsim/arraymancer"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 10;" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=150%2C150" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

<body onload="main()">
<div class="document" id="documentId">
  <div class="container">
    <h1 class="title">$title</h1>
    $content
    <div class="row">
      <div class="twelve-columns footer">
        <span class="nim-sprite"></span>
        <br/>
        <small style="color: var(--hint);">Made with Nim. Generated: $date $time UTC</small>
      </div>
    </div>
  </div>
</div>
$analytics
"""

const headerTmpl* = """
<header>
  <a class="pagetitle" href="index.html">Arraymancer</a>
  <span>
    <a href="#">Technical reference</a>
    <ul class="monospace" style="padding-bottom: 15px; padding-top: 10px;">
      <span>
      <li>
        <a href="#">Core tensor API</a>
        <ul class="monospace">
          $1
        </ul>
      </li>
      </span>
      <span>
      <li>
        <a href="#">Neural network API</a>
        <ul class="monospace">
          $2
        </ul>
      </li>
      </span>
      <span>
      <li>
        <a href="#">Linear algebra, stats, ML</a>
        <ul class="monospace">
          $3
        </ul>
      </li>
      </span>
      <span>
      <li>
        <a href="#">IO & Datasets</a>
        <ul class="monospace">
          $4
        </ul>
      </li>
      </span>
      <span>
      <li>
        <a href="#">Autograd</a>
        <ul class="monospace">
          $5
        </ul>
      </li>
      </span>
      <span>
      <li>
        <a href="#">Neuralnet primitives</a>
        <ul class="monospace">
          $6
        </ul>
      </li>
      </span>
      <span>
      <li>
        <a href="#">Other docs</a>
        <ul class="monospace">
          $7
        </ul>
      </li>
      </span>
    </ul>
  </span>
  <span>
    <a href="#">Tutorial</a>
    <ul class="monospace">
      <li><a href="tuto.first_steps.html">First steps</a></li>
      <li><a href="tuto.slicing.html">Taking a slice of a tensor</a></li>
      <li><a href="tuto.linear_algebra.html">Matrix & vectors operations</a></li>
      <li><a href="tuto.broadcasting.html">Broadcasted operations</a></li>
      <li><a href="tuto.shapeshifting.html">Transposing, Reshaping, Permuting, Concatenating</a></li>
      <li><a href="tuto.map_reduce.html">Map & Reduce</a></li>
      <li><a href="tuto.iterators.html">Basic iterators</a></li>
    </ul>
  </span>
  <span>
    <a href="#">Spellbook (How-To&apos;s)</a>
    <ul class="monospace">
      <li><a href="howto.type_conversion.html">How to convert a Tensor type?</a></li>
      <li><a href="howto.ufunc.html">How to create a new universal function?</a></li>
      <li><a href="howto.perceptron.html">How to create a multilayer perceptron?</a></li>
    </ul>
  </span>
  <span>
    <a href="#">Under the hood</a>
    <ul class="monospace">
      <li><a href="uth.speed.html">How Arraymancer achieves its speed?</a></li>
      <li><a href="uth.copy_semantics.html">Why does `=` share data by default aka reference semantics?</a></li>
      <li><a href="uth.opencl_cuda_nim.html">Working with OpenCL and Cuda in Nim</a></li>
    </ul>
  </span>
</header>
</body>
</html>
"""
